<template>
  <div class="table-containner">

    <div v-if=" this.active === '1'">
      <div class="tableTop">
        <el-row>
          <el-col :span="3"><div class="grid-content bg-purple">站点编号：{{this.Pid}}</div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple-light">站点名称：{{this.stationName}}</div></el-col>
        </el-row>
      </div>
      <div  class="configtableList">
        <div class="pagination-container footerPage">
          <el-pagination
            @current-change="CurrentChange"
            @size-change="SizeChange"
            :page-sizes="[10, 20, 50]"
            background layout="total, sizes, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
        <el-table
          :data="projectData"
          border
          stripe border fit highlight-current-row
          style="width: 100%;height:500px; "
          :header-cell-style="{background:'#F7F8F9',height: '20px',padding:'3px 0px 2px 0px'}"
          height="560px"
        >
          <el-table-column
            type="index"
            label="序号"
            width="60px"
            align="center"
          >
          </el-table-column>
          <el-table-column
            v-for="(column, index) in cols"
            :prop="column.prop"
            :label="column.label"
            :key="index"
            :width="column.width"
            :sortable="column.sortable"
          >
          </el-table-column>
          <el-table-column
            label="通讯状态"
            sortable
            width="150px">
            <template slot-scope="scope">
              <span v-if="scope.row.value3 === '0'">通讯正常</span>
              <span v-if="scope.row.value3 === '1'">通讯中断</span>
              <span v-if="scope.row.value3 != '1' && scope.row.value3 != '0'">通讯异常</span>
            </template>
          </el-table-column>
          <el-table-column
            type="index"
            label="操作"
            width="200px"
          >
            <template slot-scope="scope">
              <span class="viewDetail"  @click="viewRow(scope.$index,scope.row)" title="查看" ></span>
              <span class="update"  @click="editRow(scope.$index,scope.row)" title="编辑" ></span>
              <el-button  class="tableIcon" title="测点信息" type="text" size="small" @click.native.prevent="viewPointList(scope.$index,scope.row)">
                <span  style="font-size: 12px; border: 0px solid #2BBC8C; margin-top: -18px; padding: 7px; position: absolute; color: #0072F3">测点信息</span>
              </el-button>
              <!--<el-button  class="tableIcon" title="调试" type="text" size="small" @click="debug(scope.$index,scope.row)">-->
                <!--<span  style="font-size: 12px; border: 0px solid #2BBC8C; margin-top: -18px; padding: 7px; position: absolute; color: #0072F3; margin-left: 50px">调试</span>-->
              <!--</el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <updata-dialog v-if="updateDialogShow" :updateEquip = 'updateEdata' @giveFalse="UdialogReturn" :pid = 'Pid'  v-on:diaStatus = "diaStaus" ></updata-dialog>
    <view-equip-info v-if="viewEquipInfoShow" :viewEquip = 'viewData' @giveFalse="VdialogReturn"></view-equip-info>
    <view-debug v-if="debugShow"  @giveFalse="ViewdebugReturn"></view-debug>
    <point-list-table v-if=" this.active ==='2' " :pointCid = 'toPointList' :activStatus = this.active  v-on:tabStaus = "tabStaus"  ></point-list-table>
  </div>
</template>
<script>
  import updataDialog from './updateSitting'
  import viewEquipInfo from './viewEquipInfo'
  import pointListTable from '../point/pointListTable'
  import axios from 'axios'
  import viewDebug from './debugging'
  import viewdetail from '@/assets/components/detail.png'
  import redact from '@/assets/components/redact.png'

  export default {
    components: { updataDialog, viewEquipInfo, viewDebug, pointListTable },
    props: {
      num: ''
    },
    data() {
      return {
        proName: localStorage.getItem('name'),
        stationName: localStorage.getItem('stationName'),
        viewdetail,
        redact,
        active: '1',
        reactive: '1',
        toPointList: '', // 传给子组件的cid
        updateEdata: {}, // 修改设备信息
        viewData: {}, // 查看设备信息
        name: '李四',
        updateDialogShow: false,
        viewEquipInfoShow: false, // 查看设备信息
        debugShow: false, // 调试
        // 时间
        value1: '',
        Pid: localStorage.getItem('num'), // 获取站点编号
        projectData: [],
        // 设备数据
        projectdata: {
          access_token: localStorage.getItem('access_token'),
          type: 'object_condition',
          pid: 'ZD201809000001',
          data: {
            condition: {
              gid: '',
              cid: '',
              name: '',
              brand: '',
              catagory: '',
              param: '',
              type: '',
              addr: '',
              attris_file: ''
            },
            page: {
              page_size: '20',
              page_number: '1'
            }
          }
        },
        cols: [
          { prop: 'cid', label: '设备编号', width: '190px', sortable: true },
          { prop: 'name', label: '设备名称', width: '200px', sortable: true },
          { prop: 'type', label: '通讯类型', width: '200px' },
          { prop: 'param', label: '通讯参数', sortable: true }
        ],
        indexMethod: '',
        total: 0
      }
    },
    mounted() {
      this.engineData()
    },
    methods: {
      // 获取设备总览
      engineData() {
        this.projectdata.pid = this.Pid
        axios.post('/project', this.projectdata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.projectData = res.data.data.items
          this.total = parseInt(res.data.data.page.total)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 当前页
      CurrentChange(val) {
        this.projectdata.data.page.page_number = (val) + ''
        this.engineData()
      },
      // 每页显示多少条
      SizeChange(pageSize) {
        this.projectdata.data.page.page_size = (pageSize) + ''
        this.engineData()
      },
      // 修改成功监听刷新列表
      diaStaus: function(dialogStatus) {
        this.reactive = dialogStatus
        this.engineData()
      },
      handleSizeChange(val) {
        this.ListQuery.limit = val
      },
      handleCurrentChange(val) {
        this.ListQuery.page = val
      },
      // 父组件接收值
      UdialogReturn(data) {
        this.updateDialogShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
        console.log('11222')
        console.log(data)
      },
      // 查看设备父组件接收值
      VdialogReturn(data) {
        this.viewEquipInfoShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
      },
      // 调试父组件接收值
      ViewdebugReturn(data) {
        this.debugShow = data // data仅仅代表参数 这里等同于子组件roleDialogMask
      },
      // 编辑
      editRow(index, row) {
        this.updateEdata = row
        this.updateDialogShow = !this.updateDialogShow
      },
      // 查看
      viewRow(index, row) {
        this.viewData = row
        this.viewEquipInfoShow = !this.viewEquipInfoShow
      },
      // 调试
      debug(index, row) {
        this.debugShow = !this.debugShow
      },
      tabStaus: function(activStatus) {
        console.log(activStatus)
        this.active = activStatus
      },
      // 查看测点信息
      viewPointList(index, row) {
        this.active = '2'
        this.toPointList = row.cid
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .table-containner {
    width: 100%;
    min-height: 500px;

    .tableTop {
      width: 100%;
      min-height: 50px;
      background-color: #fff;
      font-size:14px;
      font-family:MicrosoftYaHei;
      font-weight:400;
      color:rgba(105,114,126,1);
      line-height: 20px;
      padding: 15px 20px 0px 20px;
      border-bottom: 1px solid #e0e0e0;
    }
    .configtableList{
      width: 100%;
      min-height:20vw;
      background-color: white;
      /deep/ .el-button + .el-button {
        margin-left: 0px;
      }
      .viewDetail{
        padding: 2px 9px 3px 14px;
        background: url('../../../assets/reports/detail_normal.png') no-repeat center;
      }
      .viewDetail:hover{
        cursor: pointer;
        padding: 2px 9px 3px 14px;
        background: url('../../../assets/reports/detail_hover.png') no-repeat center;
      }
      .update{
        padding: 2px 9px 3px 14px;
        background: url('../../../assets/reports/redact_normal.png') no-repeat center;
      }
      .update:hover{
        cursor: pointer;
        padding: 2px 9px 3px 14px;
        background: url('../../../assets/reports/redact_hover.png') no-repeat center;
      }
      /deep/  .gutter{
        background-color: #F7F8F9;
      }
      /deep/ .el-table td{
        border-bottom: none;
        border-right: none;
        padding: 10px 0;
      }
      /deep/.el-table th.is-leaf, .el-table td {
        border-bottom: 1px solid #fff;
      }
      /deep/ .el-table th{
        border-bottom: none;
        border-right: none;
        padding: 6px 0;
      }
    }

    .footerPage{
      float: right;
      right:20px;
      position: relative;
      margin: 5px 0px;
    }
    .tableIcon {
      padding: 0px;
      font-size: 20px;
      font-weight: 500;
      color: #25B7C8;
    }
    margin: 0 auto;

  }

</style>
